<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入标题" v-model="queryParam.messageTitle"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="消息类型" :label-col="labelCol" :wrapper-col="wrapperCol">
              <z-dict-select-tag popupContainer="parent" dictCode="MB_SYSTEM_YES_NO"  v-model="queryParam['msgCategory@EQ']"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="SendMessageList"
        ref="vxeTable"
        v-bind="gridOptions"
        :data="dataSource"
      >
      <template #action="{ row }">
        <template>
          <a @click="handleDetail(row)" >查看</a>
          <a-divider type="vertical"/>
           <a @click="sendMessage">发送</a>
        </template>
      </template>
    </vxe-grid>
    </div>
    <SendMessageModal @ok="modalFormOk" ref="modalForm" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import SendMessageModal from './modules/SendMessageModal'
import { postAction } from '@/services/manage'
import { mapGetters } from 'vuex'
export default {
  name: 'SendMessageList',
  components: { ZDictSelectTag, SendMessageModal },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '标题', field: 'title' },
        { title: '消息类型', field: 'msgCategory', slots: { default: ({ row }) => {
          if (row.msgCategory === '1') {
            return '通知公告'
          } else if (row.msgCategory === '2') {
            return '系统消息'
          } else {
            return row.msgCategory
          }
        } }},
        { title: '发布人', field: 'sender' },
        { title: '优先级', field: 'level', slots: { default: ({ row }) => {
          if (row.level === 'L') {
            return '低'
          } else if (row.level === 'M') {
            return '中'
          } else if (row.level === 'H') {
            return '高'
          } else {
            return row.level
          }
        } }},
        { title: '通告对象', field: 'msgType', slots: { default: ({ row }) => {
          if (row.msgType === 'USER') {
            return '指定用户'
          } else if (row.msgType === 'ALL') {
            return '全体用户'
          } else {
            return row.msgType
          }
        } }},
        { title: '发布状态', field: 'sendTime' },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/message/my/',
        readAll: '/message/read/',
        channelList: '/message/channel/list',
        send: '/message/send'
      },
      channelList: [],
      dataSource: [
        { title: '消息提醒', msgCategory: '1', level: 'L', msgType: 'ALL' },
        { title: '消息推送测试1', msgCategory: '1', level: 'L', msgType: 'ALL' },
        { title: '消息推送测试2', msgCategory: '1', level: 'L', msgType: 'ALL' },
        { title: '消息推送测试3', msgCategory: '1', level: 'L', msgType: 'ALL' }
      ],
      disabledProxy: true
    }
  },
  computed: {
    ...mapGetters('account', ['user'])
  },
  methods: {
    sendMessage() {
      postAction(this.url.send, {
        channel: 'innerMsg',
        from: this.user.username,
        to: 'li,11',
        title: '我是测试的标题',
        content: '<p>1</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>22</p><p>2</p><p>2</p><p>2</p><p>22</p><p>2</p><p>2</p><p>2</p><p>22</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p><br></p>'
      }).then(res => {
        if (res.success) {
          this.$message.success('发送成功')
        }
        console.log(res)
      })
    }
  },
  async mounted() {

  }

}
</script>

